<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./base/swiper.min.css">
    <script src="./base/swiper.min.js"></script>
    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <!--调用轮播图组件-->
        <my-banner></my-banner>
    </div>

    <!--my-banner的template-->
    <template id="my-banner">
        <div class="my-banner swiper-container">
            <div class="swiper-wrapper">
                <div 
                    class="swiper-slide"
                    v-for="banner in banners"
                    :key="banner.id"
                >
                    <img width="100%" :src="banner.image" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div>
                <input type="text" v-model="msg">
            </div>
        </div>
    </template>
    <script>

        //封装banner组件
        Vue.component("my-banner",{
            template:"#my-banner",
            data(){//目的 让每一个实例返回一个独立对象的拷贝
                return {
                    msg:"",
                    banners:null
                }
            },
            created(){
                //异步请求数据
                this.$http.get("./banners.json").then(res=>{ //10s
                    //console.log(res.data.bannerList)
                    this.banners = res.data.bannerList  //3s内部虚拟dom对比
                    //实例化swiper
                    /*
                        会发现一个问题：banner能够滑动，但是出现划不过去的问题！
                        考虑：为什么会出现这个问题？
                            在这里实例化的时候，最外层的swiper-containre是存在的，但是还没有我们需要的swiper-slide这个
                            真实的dom结构。这是因为当我们数据改变的时候，内部生成新的虚拟dom,新的虚拟dom会与上一次的虚拟
                            dom结构做对比，比较差异，出来差异之后再去进行真实dom的渲染操作。
                            但是呢，你在这里瞬间执行了实例化的操作，那就导致虚拟dom对比完成生成真实的swiper-slide后，
                            实例化操作早就结束了。
                        
                        解决方案：
                            因为数据改变引发虚拟dom更新操作，更新完成后才会生成4个swiper-slide真实dom结构，所以后续
                            实例化的过程，必须要等到因数据更新生成的4个swiper-slide完成渲染完毕后，再去实例化操作
                            就可以解决这个划不动的问题了。
                            在Vue中，提供了一个方法   this.$nextTick(()=>{})
                            这个方法就规定了，在此回调函数内部，就可以获取到因数据更新而生成的真实dom。
                    

                    */
                    //this.$nextTick() === Vue.nextTick()
                    // this.$nextTick().then(rs=>{
                        
                    // })

                    this.$nextTick(()=>{
                        //banner更改了  swiper-slide真实dom已经存在了
                        new Swiper(".swiper-container",{ 
                            loop:true,
                            pagination:{
                                el:".swiper-pagination"
                            }
                        })
                    })
                })
            },

            // beforeCreate(){//因为在这个钩子函数里面，连最外层的swiper-container这个dom都获取不到
            //     new Swiper(".swiper-container",{ //1s  只是实例化一个空壳而已（swiper-container）
            //         loop:true
            //     })
            // }
            
            // mounted(){
            //      //发现也是划不过去的问题  因为上面的数据请求是异步的，不会阻塞mounted钩子函数的执行，可能那边
            //     //还在请求着数据，而这里早就实例化完毕了。
            //     new Swiper(".swiper-container",{ //1s  只是实例化一个空壳而已（swiper-container）
            //         loop:true
            //     })
            // }

            //数据更新的时候会立马执行   但是这里面获取不到更新后的dom,所以swiper-slide还是不存在的
            // beforeUpdate(){
            //     new Swiper(".swiper-container",{ 
            //         loop:true
            //     })
            // }

            //这个钩子函数是可以的  这是一种解决方案
            //当数据更新的时候，引发虚拟dom结构对比，更新完成后，渲染真实dom，真实dom生成好了之后，才会进入此钩子函数
            //在这个钩子函数里面，就可以获取因数据更新而生成的真实dom结构了。
            //发现了一个问题！ 其他数据变化的时候，updated这个钩子函数也会执行！就会导致swiper实例化多次！
            // updated(){ //在updated钩子函数里面，获取到的是： 因数据改变而渲染的真实dom结构
            //     console.log("updated....")
            //     if(!this.swiper){
            //         this.swiper = new Swiper(".swiper-container",{ 
            //             loop:true,
            //             pagination:{
            //                 el:".swiper-pagination"
            //             }
            //         })
            //     }
            // }


            
            
            //settimeout是异步的，需要等所有的同步任务都执行完成后才会执行。
            //同步任务==》代表数据改变==》生成新的虚拟dom==>虚拟dom与上一次虚拟dom做对比==》
            //渲染真实dom结构==》就会出现4个swiper-slide真实dom结构===》再去实例化swiper插件
            // watch:{
            //     banners:{
            //         handler(val){
            //             setTimeout(() => {
            //                 new Swiper(".swiper-container",{ 
            //                     loop:true,
            //                     pagination:{
            //                         el:".swiper-pagination"
            //                     }
            //                 })
            //             }, 30);
            //         }
            //     }
            // }    


        })

        //创建vue实例
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>